<template>
  <div>
    <div :class="right_menu ? 'web-bodys web-bodys-hide' : 'web-bodys'" v-if="head_show">
      <!-- 非首页头部 -->
      <div class="web-top">
        <!-- 手机头部 -->
        <div class="web-top-mobile">
          <div :class="right_menu ? ' web-nav-mobile  web-nav-mobile-hide' : ' web-nav-mobile'">
            <img @click="tohome" src="https://jingye.oss-cn-qingdao.aliyuncs.com/head/logo.png" />
            <img
              src="https://jingye.oss-cn-qingdao.aliyuncs.com/head/menu.png"
              class="top-menu-img"
              @click="setMenu()"
            />
          </div>
          <div style="height:60px;"></div>
          <div class="web-banner-mobile">
            <img :src="mobile_src" alt v-if="!is_arr" />
            <div class="banner-arr" v-else>
              <!-- <img
                v-for="(item,key) in this.mobile_src"
                :src="item.src"
                :style="key == 0 ? changeBannerStyle() : ''"
              />-->
              <!-- <swiper
                :options="swiperOption_m"
                ref="mySwiper_banner"
              >
                <swiper-slide v-for="(item,key) in this.mobile_src" :key="key">
                  <img :src="item.src" alt />
                </swiper-slide>
              </swiper>-->
              <!-- <swiper class="mo_swiper" :options="swiper_he_mo">
                <swiper-slider class="mo_swiper_sli" v-for="(item,index) in mobile_src" :key="index">
                  <img :src="item.src" alt />
                </swiper-slider>
              </swiper> -->
              <!-- <div class="banner-arr-slide">
                <span
                  v-for="(item,key) in this.mobile_src"
                  :key="key"
                  :style="banner_index == key ? 'background:#fff;' : ''"
                  @click.stop="changeBanner(key)"
                ></span>
              </div> -->
            </div>
          </div>
        </div>
        <!-- <contact></contact> -->
        <div class="contact-box" :style="'bottom:'+ contact_height +'px'">
          <contact @backTops="backTop"></contact>
        </div>
        <!-- 电脑头部 -->
        <div class="web-top-pc" v-if="router_path != '/index/index/index'">
          <web-head :banner="pc_src"></web-head>
        </div>
      </div>
      <!-- 网站主题 -->
      <div class="web-body">
        <router-view></router-view>
      </div>
      <div>
        <foot @backTops="backTop"></foot>
      </div>
    </div>
    <!-- 侧边栏 -->
    <!-- 手机右侧菜单 -->
    <!-- 遮罩层 -->
    <div
      :class="right_menu ? 'right-mene-model right-mene-model-show' : 'right-mene-model'"
      @touchstart="closeMenu()"
    ></div>
    <div :class="right_menu ? 'web-right-menu web-right-menu-show' : 'web-right-menu'">
      <mobile-menu @close="closeMenu"></mobile-menu>
    </div>
    <!-- 底部遮罩层 -->
    <!-- <div class="load" @closeL="close" v-if="loading"></div> -->
  </div>
</template>

<script>
import mobileMenu from "../components/mobile/menu.vue";
import foot from "./Components/footer";
import webHead from "./Components/head";
import contact from "./Components/contact";
import { swiper, swiperSlide } from "vue-awesome-swiper";

export default {
  components: { mobileMenu, foot, webHead, contact, swiper, swiperSlide },
  props: { banner: {}, router_path: {} },
  data() {
    return {
      contact_flag: false,
      contact_height: 0,
      scroll: 0,
      right_menu: false,
      loading: true,
      scrollToTop: 0,
      banner_list: [],
      head_show: false,
      pc_src: "",
      mobile_src: "",
      is_arr: false,
      banner_index: 0,
      startX: 0,
      startY: 0,
      swiper_he_mo: {
        direction: "horizontal",
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        }
      },
      swiperOption_m: {
        notNextTick: true,
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        direction: "horizontal",
        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true,
        autoplayDisableOnInteraction: true,
        paginationClickable: true,
        pagination: {
          el: ".swiper-pagination",
          paginationType: "custom"
        }
        // navigation: {
        //   //最新版本的需要这样配置，按钮才有效
        //   prevEl: ".swiper-button-prev", //上一张
        //   nextEl: ".swiper-button-next" //下一张
        // },
        // mousewheelControl: true,
        // observeParents: true
      },
      contact_show: false
    };
  },
  mounted() {
    this.scrollm;
    setTimeout(() => {
      if (this.mobile_src instanceof Array) {
        setInterval(() => {
          this.bannerChanges(2);
        }, 5000);
      }
    }, 2000);

    window.addEventListener("scroll", this.handleScroll, true);
    // this.ishome()
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  },

  methods: {
    // // 判断是否首页路由
    // ishome() {
    //   // console.log(this.$route.path)
    //   console(1111)
    // },
    handleScroll(e) {
      this.scroll = this.scrollTop =
        e.target.documentElement.scrollTop || e.target.body.scrollTop; // 执行代码
      if (this.scrollTop == 0) {
        var mo = function(e) {
          e.preventDefault();
        };
        document.body.style.overflow = ""; //出现滚动条
        document.removeEventListener("touchmove", mo, false);
      }
      if (this.scrollTop > 100) {
        this.contact_height = 80;
        this.wecan_flag = true;
      } else {
        this.contact_height = 0;
      }
    },
    // 回到顶部
    //   backTop() {
    //   const that = this
    //   let timer = setInterval(() => {
    //     let ispeed = Math.floor(-that.scrollTop / 30)
    //     document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
    //     if (that.scrollTop === 0) {
    //       clearInterval(timer)
    //     }
    //   }, 16)
    // },
    //  跳转到首页
    tohome() {
      if (this.$route.path == "/index/index/index") return false;
      this.$router.push("/index/index/index");
    },
    // slideChangeTransitionEnd() {
    //   var swiper = this.$refs.mySwiper_banner.swiper;
    //   this.banner_index = swiper.realIndex;
    // },
    touchstart() {
      event.preventDefault(); //阻止默认事件（长按的时候出现复制）

      this.startX = event.changedTouches[0].pageX;
      this.startY = event.changedTouches[0].pageY;
    },
    touchmove() {
      event.preventDefault();
      var moveEndX = event.changedTouches[0].pageX;
      var moveEndY = event.changedTouches[0].pageY;
      var X = moveEndX - this.startX;
      var Y = moveEndY - this.startY;
      if (Math.abs(X) > Math.abs(Y) && X > 0) {
        this.bannerChange(1);
      } else if (Math.abs(X) > Math.abs(Y) && X < 0) {
        this.bannerChange(2);
      } else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
      } else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
      } else {
      }
    },
    changeBannerStyle() {
      var width = document.body.clientWidth;
      return "margin-left:-" + this.banner_index * width + "px";
    },
    bannerChanges(e) {
      var len = this.mobile_src.length;
      if (e == 1) {
        if (this.banner_index == 0) this.banner_index = len - 1;
        else this.banner_index--;
      } else {
        if (this.banner_index == len - 1) this.banner_index = 0;
        else this.banner_index++;
      }
    },
    changeBanner(key) {
      this.banner_index = key;
      var swiper = this.$refs.mySwiper_banner.swiper;
      swiper.slideToLoop(key, 1000, false); //切换到第一个slide，速度为1秒
    },
    // handleScroll(e) {
    //   this.scrollTop =
    //     e.target.documentElement.scrollTop || e.target.body.scrollTop; // 执行代码
    //   // console.log(scrollTop);
    // },
    backTop() {
      var mo = function(e) {
        e.preventDefault();
      };
      document.body.style.overflow = "hidden";
      document.addEventListener("touchmove", mo, false); //禁止页面滑动
      // var ju = (document.body.scrollTop = document.documentElement.scrollTop = 0);
      // window.Animation("scroll", ju);
      const that = this;
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 30);
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed;
        if (that.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
      this.handleScroll();
    },
    // 遮罩层
    close(data) {
      // this.loading = data;
      // eslint-disable-next-line no-console
      console.log(data);
    },
    //打开关闭菜单
    setMenu() {
      this.right_menu = this.right_menu ? false : true;
    },
    //关闭菜单
    closeMenu() {
      this.right_menu = false;
    }
  },
  watch: {
    banner: {
      handler(v, o) {
        // console.log(v);
        if (this.banner.mobile && this.banner.pc) this.head_show = true;
        this.pc_src = this.banner.pc.src;

        if (this.banner.mobile instanceof Array) {
          this.is_arr = true;
          this.mobile_src = this.banner.mobile;
        } else {
          this.is_arr = false;
          this.mobile_src = this.banner.mobile.src;
        }
      },
      deep: true
    }
  }
};
</script>

<style scoped lang="less">
@import url("../assets/css/index.css");
.banner-arr {
  width: 100%;
  /* height: 2rem; */
}
.banner-arr img {
  width: 100% !important;
}
.banner-arr-slide {
  z-index: 9;
}
.contact-box {
  position: fixed;
  right: 0;
  width: 80px;
  z-index: 999;
  background-color: #ffffff;
  transition: all 0.1s linear;
}
.mo_swiper {
  width: 100%;
  height: 2rem;
  .mo_swiper_sli {
    width: 100%;
    height: 100%;
  }
}
</style>